<template>
  <div id="app">
    <el-menu
        :default-active="activeIndex"
        class="el-menu-demo"
        mode="horizontal"
        background-color="#545c64"
        text-color="#fff"
        active-text-color="#ffd04b">
      <el-menu-item index="1" ><a @click="routerShop">门店管理</a></el-menu-item>
      <el-menu-item index="2" disabled="true">商品管理</el-menu-item>
      <el-menu-item index="3">订单管理</el-menu-item>
      <el-menu-item index="4"><a @click="logOut">退出登录</a></el-menu-item>
    </el-menu>

    <div class="foot-header">
      <el-table size="big" current-row-key="id" :data="dataList" stripe
      >
        <el-table-column type="expand" >
          <template slot-scope="props">
            <el-table :data="props.row.orderItemList" label-position="left" inline
                      size="mini" style="width: 92%;margin-left: 8%;">
              <el-table-column label="订单项" prop="itemname"></el-table-column>
              <el-table-column label="单价" prop="price"></el-table-column>
              <el-table-column label="数量" prop="amount"></el-table-column>
            </el-table>
          </template>
        </el-table-column>
        <el-table-column prop="id" label="订单编号" ></el-table-column>
        <el-table-column prop="cname" label="顾客名称" ></el-table-column>
        <el-table-column prop="status" label="订单状态" ></el-table-column>
        <el-table-column label="操作" align="center">
          <template slot-scope="scope">
            <el-button type="info" size="mini" @click="handleFinish(scope.row)">确认订单</el-button>
            <el-button size="mini" type="danger" @click="handleRefund(scope.row)">取消订单</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>

  </div>
</template>

<script>
export default {
  name: "ManageOrder",
  el: '#app',
  data() {
    return {
      activeIndex: '3',
      dataList: [],
      userId: 0,
    }
  },
  created() {
    this.getUser();
  },
  methods: {
    //查询
    findAll(id) {
      this.$http({
        method: "GET",
        params: {
          bid:id
        },
        url: 'http://localhost:84/order/business/get/dto'
      }).then((res) => {
        this.dataList = res.data.data;
      }, (err) => {
        if (err.response.status==403)
        {
          this.$message("未通过认证，请先登录或被授予权限");
        }
        else {
          console.log('err',err);
        }
      })
    },

    getUser() {
      this.$http({
        url: 'http://localhost:84/user/get',
      }).then((res)=>{
        this.userId = res.data;
        this.findAll(this.userId);
      },(err)=>{
        console.log('err',err);
      });
    },

    // 删除
    handleFinish(row) {
      this.$confirm("确认完成该订单？", "提示", {type: 'warning'}).then(() => {
        this.$http.get("http://localhost:84/order/finish/" + row.id).then((res) => {
          if (!res.data.flag) {
            this.$message.error(res.data.message)
          } else {
            this.$message.success(res.data.message)
          }
          this.findAll(this.userId);
        })
      });
    },

    // 退款
    handleRefund(row) {
      this.$confirm("确认已经退款给该顾客？", "提示", {type: 'warning'}).then(() => {
        this.$http.get("http://localhost:84/order/refund/" + row.id).then((res) => {
          if (!res.data.flag) {
            this.$message.error(res.data.message)
          } else {
            this.$message.success(res.data.message)
          }
          this.findAll(this.userId);
        })
      });
    },

    logOut(){
      this.$confirm("确认退出登录？", "提示", {type: 'warning'}).then(() => {
        this.$http.get("http://localhost:84/user/logout").then((res) => {
          if (!res.data.flag) {
            this.$message.error(res.data.message)
          } else {
            this.$message.success(res.data.message)
          }
          sessionStorage.removeItem('token');
          this.$router.push({name:'UserLogin'});
        })
      });
    },

    routerShop(){
      this.$router.push({name:'ManageShop'})
    }
  }
}
</script>

<style scoped>

</style>